<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	pageContext.setAttribute("basePath",request.getContextPath());
%>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>角色用户分配</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="${basePath }/static/css/bootstrap.min.css" rel="stylesheet">
	<link href="${basePath }/static/css/font-awesome.min.css" rel="stylesheet">
	<!-- bootstrap-table 表格插件样式 -->
	<link href="${basePath }/static/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	<link href="${basePath }/static/css/animate.css" rel="stylesheet">
	<link href="${basePath }/static/css/style.css" rel="stylesheet">
	<link href="${basePath }/static/ruoyi/css/ry-ui.css" rel="stylesheet">
	<link rel="stylesheet" href="${basePath }/static/ajax/libs/layer/theme/default/layer.css">
	<link rel="stylesheet" href="${basePath }/static/ajax/libs/layer/theme/moon/style.css">
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
	        <div class="col-sm-12 select-table table-striped">
			    <div class="bootstrap-table">
				    <div class="fixed-table-toolbar">
				    	<div class="bs-bars pull-left">
					    	<div class="btn-group-sm" id="toolbar" role="group">
								<a class="btn btn-success" onclick="selectUser(${list[0].roleId })">
					                <i class="fa fa-plus"></i> 添加用户
					            </a>
			        		</div>
		        		</div>
		        		
		        		
					</div>
					
					
					<div class="col-sm-12 select-table table-striped">
                <div class="bootstrap-table">
                    <div class="fixed-table-container" style="padding-bottom: 0px;">
                        <div class="fixed-table-body">
                            <div class="fixed-table-loading" style="top: 41px; display: none;">正在努力地加载数据中，请稍候……</div>
                            
                            <table id="bootstrap-table" data-mobile-responsive="true" class="table table-hover">
                                <thead>
                                <tr>
                                    <th class="bs-checkbox" style="width: 36px; ">
                                        <div class="th-inner"><input name="btSelectAll" type="checkbox"></div>
                                    </th>
                                    <th>
                                        <div class="th-inner ">用户ID</div>
                                    </th>
                                    <th>
                                        <div class="th-inner">姓名</div>
                                    </th>
                                    <th>
                                        <div class="th-inner ">邮箱</div>
                                    </th>
                                    <th>
                                        <div class="th-inner ">手机</div>
                                    </th>
                                    <th style="text-align: center;">
                                        <div class="th-inner ">操作</div>
                                    </th>
                                </tr>
                                </thead>

                                <tbody>
                                <c:forEach items="${list }" var="user">
                                	<tr>
	                                    <td class="bs-checkbox ">
	                                        <input data-index="0" name="btSelectItem" type="checkbox">
	                                    </td>
	                                    <td>${user.userId }</td>
	                                    <td>${user.name }</td>
	                                    <td>${user.email }</td>
	                                    <td>${user.phone }</td>
	                                    <td style="text-align: center; ">
	                                    	<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="cancelAuthUser(${user.userId})">
                                            	<i class="fa fa-user"></i>取消授权
                                        	</a>
	                                    </td>
                                	</tr>                                	
                                </c:forEach>
                                
                                </tbody>
                            </table>
                        </div>
                        
                    </div>
                </div>
                <div class="clearfix text-center">共 ${list.size() } 条记录</div>
            </div>
					
			</div>
		</div>
	</div>
</div>
	
<script src="${basePath }/static/js/jquery.min.js"></script>
<script src="${basePath }/static/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="${basePath }/static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="${basePath }/static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="${basePath }/static/ajax/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- jquery-export 表格导出插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/export/tableExport.js"></script>
<!-- 遮罩层 -->
<script src="${basePath }/static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="${basePath }/static/ajax/libs/iCheck/icheck.min.js"></script>
<script src="${basePath }/static/ajax/libs/layer/layer.min.js"></script>
<script src="${basePath }/static/ajax/libs/layui/layui.js"></script>
<script src="${basePath }/static/ruoyi/js/common.js"></script>
<script src="${basePath }/static/ruoyi/js/ry-ui.js"></script>

<script>
	
	//获取项目根目录
	function getRootPath(){
		let href = window.document.location.href;
		let pathName = window.document.location.pathname;
		let index = href.indexOf(pathName);
		let localhost = href.substring(0,index);
		let project = pathName.substring(0,(pathName.substr(1).indexOf('/'))+1);
			
		return (localhost+project);
	}
	
	let rootPath = getRootPath();
		
	/* 分配用户-选择用户 */
	function selectUser(roleId) {
		console.log(roleId);
		var url = rootPath + '/system/role/select.do?roleId='+roleId;
	    $.modal.open("选择用户", url);
	}
	
	/* 分配用户-取消授权 */
	function cancelAuthUser(userId) {
		$.modal.confirm("确认要取消该用户角色吗？", function() {
			$.ajax({
				type : "POST",
				url : rootPath + "/system/role/cancle.do",
				data : {
					userId:userId
				},
            	dataType : "json",
                success : function (response) {
                	layer.msg(response.message, {
                	    icon: 1,
                	    time: 2000,
                	    shade: [0.1, '#8F8F8F']
                	},function() {
                		location.reload();
                	});
                }  
			});
	    })
	}
</script>
<div class="layui-layer-move"></div>
</body>
</html>